:root {
    --status-dot-size: 8px;
    --status-dot-animation-duration: 1.5s;

    --status-dot-color: rgb(216, 226, 233);
    --status-dot-color-semi: rgba(216, 226, 233, .5);
    --status-dot-color-transparent: rgba(216, 226, 233, 0);

    --status-dot-color-primary: rgb(0, 149, 255);
    --status-dot-color-primary-semi: rgba(0, 149, 255, .5);
    --status-dot-color-primary-transparent: rgba(0, 149, 255, 0);

    --status-dot-color-success: rgb(75, 210, 143);
    --status-dot-color-success-semi: rgba(75, 210, 143, .5);
    --status-dot-color-success-transparent: rgba(75, 210, 143, 0);

    --status-dot-color-warning: rgb(255, 170, 0);
    --status-dot-color-warning-semi: rgba(255, 170, 0, .5);
    --status-dot-color-warning-transparent: rgba(255, 170, 0, 0);

    --status-dot-color-danger: rgb(255, 77, 77);
    --status-dot-color-danger-semi: rgba(255, 77, 77, .5);
    --status-dot-color-danger-transparent: rgba(255, 77, 77, 0);
}

@keyframes status-dot-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--status-dot-color-semi);
    }

    70% {
        box-shadow: 0 0 0 var(--status-dot-size) var(--status-dot-color-transparent);
    }

    100% {
        box-shadow: 0 0 0 0 var(--status-dot-color-transparent);
    }
}

@keyframes status-dot-pulse-primary {
    0% {
        box-shadow: 0 0 0 0 var(--status-dot-color-primary-semi);
    }

    70% {
        box-shadow: 0 0 0 var(--status-dot-size) var(--status-dot-color-primary-transparent);
    }

    100% {
        box-shadow: 0 0 0 0 var(--status-dot-color-primary-transparent);
    }
}

@keyframes status-dot-pulse-success {
    0% {
        box-shadow: 0 0 0 0 var(--status-dot-color-success-semi);
    }

    70% {
        box-shadow: 0 0 0 var(--status-dot-size) var(--status-dot-color-success-transparent);
    }

    100% {
        box-shadow: 0 0 0 0 var(--status-dot-color-success-transparent);
    }
}

@keyframes status-dot-pulse-warning {
    0% {
        box-shadow: 0 0 0 0 var(--status-dot-color-warning-semi);
    }

    70% {
        box-shadow: 0 0 0 var(--status-dot-size) var(--status-dot-color-warning-transparent);
    }

    100% {
        box-shadow: 0 0 0 0 var(--status-dot-color-warning-transparent);
    }
}

@keyframes status-dot-pulse-danger {
    0% {
        box-shadow: 0 0 0 0 var(--status-dot-color-danger-semi);
    }

    70% {
        box-shadow: 0 0 0 var(--status-dot-size) var(--status-dot-color-danger-transparent);
    }

    100% {
        box-shadow: 0 0 0 0 var(--status-dot-color-danger-transparent);
    }
}

.status-dot {
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
    width: var(--status-dot-size);
    height: var(--status-dot-size);
    background-color: var(--status-dot-color);
}

.status-dot[pulse] {
    animation-name: status-dot-primary;
    animation-duration: var(--status-dot-animation-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: 0;
    animation-fill-mode: none;
}

.status-dot[primary] {
    background-color: var(--status-dot-color-primary);
}

.status-dot[primary][pulse] {
    animation-name: status-dot-pulse-primary;
}

.status-dot[success] {
    background-color: var(--status-dot-color-success);
    animation-name: status-dot-pulse-success;
}

.status-dot[success][pulse] {
    animation-name: status-dot-pulse-success;
}

.status-dot[warning] {
    background-color: var(--status-dot-color-warning);
}

.status-dot[warning][pulse] {
    animation-name: status-dot-pulse-warning;
}

.status-dot[danger] {
    background-color: var(--status-dot-color-danger);
    animation-name: status-dot-pulse-danger;
}

.status-dot[danger][pulse] {
    animation-name: status-dot-pulse-danger;
}